<template>
    <div>
        <div class="top">
            <Input placeholder="用户编码" style="width:300px" v-model="formData.userCode"></Input>
            <Input placeholder="用户名" style="width:300px" v-model="formData.userName"></Input>
            <Button type="primary" icon="ios-search" @click="searchQuery">搜索</Button>
            <Button type="primary" @click="exportExcel">导出</Button>
        </div>
        <Table :columns="columns" :data="dataList" border></Table>
        <div style="position: relative">
            <Page style="text-align: right;padding-top: 10px;" :page-size="formData.rows" @on-page-size-change="pageSizeFn" @on-change="pageFn" :total="total" show-sizer show-total></Page>
        </div>
    </div>
</template>
<script>
    import qs from 'qs'
    import API from '../../config/api'
    export default {
        data() {
            return {
                columns: [
                    {
                        title: "序号",
                        key: "id",
                        render: (h,params)=>{
                            let index = params.index;
                            return h('span', index)
                        }
                    },
                    {
                        title: "用户编码",
                        key: "userCode"

                    },
                    {
                        title: "用户名",
                        key: "userName"
                    },
                    {
                        title: "所属问卷",
                        key: "paperTitle",
                    },
                    {
                        title: "创作时间",
                        key: "createTime",
                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 150,
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.$router.push({name: 'resultDetail', params: {id: params.row.id}})
                                            }
                                        }
                                    },
                                    "查看"
                                )
                            ]);
                        }
                    }
                ],
                dataList: [],
                total:0,
                formData:{
                    paperId: '',
                    paperTitle: '',
                    userCode: '',
                    userName: '',
                    page: 1,
                    rows: 20
                }
            };
        },
        created(){
            this.formData.paperId = this.$route.params.id;
            this.formData.paperTitle = this.$route.params.paperTitle;
            this.query();
        },
        methods: {
            exportExcel(){
                window.open(process.env.BASE_URL+'/evoucher/bs/Answer/exportExcel?paperId='+this.formData.paperId+'&paperTitle='+this.formData.paperTitle+'&userCode='+this.formData.userCode+'&userName='+this.formData.userName)
                // let param = {
                //     paperId: this.formData.paperId,
                //     userCode: this.formData.userCode,
                //     userName: this.formData.userName,
                //     paperTitle: this.formData.paperTitle
                // };
                // let config = {
                //     headers:{
                //         'Content-Type': 'application/x-www-form-urlencoded'
                //     },
                //     responseType: 'blob'
                // }
                // this.axios.get(API.EXPORT_EXCEL, {params: param}).then(res=>{
                //
                // })
            },
            query(){
                let formData = new FormData();
                formData.append('paperId', this.formData.paperId);
                formData.append('paperTitle', this.formData.paperTitle);
                formData.append('userCode', this.formData.userCode);
                formData.append('userName', this.formData.userName);
                formData.append('page', this.formData.page);
                formData.append('rows', this.formData.rows);
                this.axios.post(API.SERVER_RESULT, formData).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.total = data.data.totalCount;
                        this.dataList = data.data.dataList;
                    }
                })
            },
            pageSizeFn(size){
                this.formData.rows = size;
                this.query();
            },
            pageFn(num){
                this.formData.page = num;
                this.query();
            },
            searchQuery() {
                this.formData.page = 1;
                this.query();
            }
        }
    };
</script>
<style scoped>
    .top {
        margin: 30px 0;
    }
</style>
